<template>
  <div>
    <Row>
      <Col span="8">
      <span>供应商名称: </span>
      <Input v-model="formList.equip_supplier" disabled style="width:70%"></Input>
      </Col>
      <Col span="8">
      <span>供应商电话: </span>
      <Input v-model="formList.equip_supplier_tel" disabled style="width:70%"></Input>
      </Col>
      <Col span="8">
      <Button type="primary" class="button" @click="add" v-if="this.switch" style="margin-bottom:5px">新增</Button>
      </Col>
    </Row>

    <Table :columns="column" :data="tableData.results" :height="offsetHeight" border :loading="loading">
      <template slot-scope=" { row }" slot="action">
        <Button type="primary" size="small" @click="info(row)" style="margin-right: 5px">基本信息</Button>
        <Button type="info" size="small" @click="supplierInfo(row.id)">供应商信息</Button>
      </template>
    </Table>
    <Row type="flex" justify="end">
      <Page :total="tableData.totalRecord" show-sizer @on-change="pageNoChange" @on-page-size-change="pageSizeChange" />
    </Row>

    <Modal v-model="show" title="故障信息">
      <Input v-model="equipment_fault_text" type="textarea" :rows='4'></Input>
      <div slot="footer" style="text-align:right">
        <Button type="error" @click="show =false" :loading="saveLoading">取消</Button>
        <Button type="primary" @click="onAdd" :loading="saveLoading">添加</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { problemAdd, problemLog } from '@/api/device'
export default {
  name: 'manageSupplier',
  components: {

  },
  props: {
    formList: {
      type: Object,
      default: () => {
        return ''
      }
    },
    switch: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data () {
    return {
      offsetHeight: document.documentElement.clientHeight - 160,
      loading: false,
      saveLoading: false,
      column: [
        {
          title: '故障时间',
          key: 'failt_time',
          align: 'center',
          width: 200
        },
        {
          title: '故障信息',
          key: 'equipment_fault_text',
          align: 'center'
        }
      ],
      pageNo: 1,
      pageSize: 10,
      tableData: [],
      show: false,
      equipment_fault_text: ''
    }
  },
  created () {

  },
  mounted () {
  },
  methods: {
    init () {
      this.loading = true
      problemLog({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        parent_id: this.formList.id
      }).then(res => {
        let data = res.data.data
        if (data) {
          this.tableData = data
          this.loading = false
        } else {
          this.loading = false
          this.$Message.error({
            content: res.data.errmsg
          })
        }
      })
    },
    cancel () {
      this.$emit('cancel')
    },
    add () {
      this.show = true
    },
    onAdd () {
      this.saveLoading = true
      problemAdd({
        parent_id: this.formList.id,
        equipment_fault_text: this.equipment_fault_text
      }).then(res => {
        let data = res.data.data
        if (data) {
          this.$Message.success({
            content: '添加成功！'
          })
          this.saveLoading = false
          this.init()
          this.show = false
        } else {
          this.$Message.error({
            content: '添加失败\n' + res.data.errmsg
          })
          this.saveLoading = false
          this.show = false
        }
      })
    },
    pageNoChange (pageNo) {
      this.pageNo = pageNo
      this.init()
    },
    pageSizeChange (pageSize) {
      this.pageSize = pageSize
      this.init()
    }
  },
  computed: {

  },
  watch: {
    'formList.id' (newVal, oldVal) {
      if (newVal !== oldVal) {
        this.init()
      }
    }
  }
}
</script>
<style lang='less' scoped>
.modalFooter {
  margin-top: 10px;
  text-align: right;
  .button {
    margin-left: 5px;
  }
}
.wid {
  width: 100%;
}
::v-deep .ivu-input[disabled] {
  color: #515a6e;
}
</style>
